body {
  background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%));
  overflow: hidden;
}
div {
  position: relative;
  width: 30vmin;
  height: 30vmin;
  background: #fff;
  margin: 30vmin auto;
}
div::after,
div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
div::before {
  transform-origin: 0 50%;
  transform: translate(100%, 0) skewY(45deg) scaleX(0.6);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
}
div::after {
  transform-origin: 0 0;
  transform: translate(0, 100%) skewX(45deg) scaleY(0.6);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
}
